<template>
    <div>
        <!--<div class="head">-->
            <!--<div class="logo">登录页</div>-->
            <!--<div class="menu"></div>-->
        <!--</div>-->
        <div class="login">
            <div class="login_info">
                <div class="login_info_txt"><br> </div>
                <img class="login_info_img" src="../assets/fengjing.png"/>
            </div>
            <div class="login_item">
                <div class="login_item_welcome">
                    人生到处知何似,应似飞鸿踏雪泥</div>
                <div class="login_item_description"><br><br>人生充满了艰险阻难，但是应该如飞鸿一样踏雪而过，披荆斩棘，在人生路上留下印记，然后继续前进
                    <br ><br ><br ><br ></div>
                <div class="login_item_frame">
                    <div class="user">
                        <img class="img_usr" src="../assets/用户.png">
                        <div class="input">
                            <div class="input_hint">
                                用户账号</div>
                           <input id="user" type="text" class="input_sample" style="border: 0px;background-color: #eef7f5"/>
                            <!--<div class="input_sample">-->
                                <!--1126918543@qq.com</div>-->
                        </div>
                        <!--<img class="input_hint_imgi" src="../assets/正确.png"/>-->
                    </div>
                    <div class="password">
                        <img class="img_paswod" src="../assets/密码.png"/>
                        <div class="input">
                            <div class="input_hint">
                                输入密码</div>
                            <input id="password" type="password" class="input_sample" style="border: 0px;"/>
                        </div>
                        <!--<img class="input_hint_imgii" src="../assets/关闭.png"/>-->
                    </div>
                    <div style="display: flex;flex-direction: row">
                        <el-input v-model="captcha" placeholder="请输入验证码" style="width: 125px;" @focus="generateCaptcha(true)"></el-input>
                        <canvas id='captcha_canvas' style="width: 100px;height: 40px;display: none"></canvas>
                        <img id="captcha_img" style="width: 100px;height: 40px" @click="generateCaptcha(false)"/>
                    </div>
                </div>
                <div class="login_util">
                    <div class="remember">
                        <img class="remember_img" src="../assets/正确.png"/>
                        <div class="remember_txt">保持登陆</div>
                    </div>
                    <div class="forget">
                        <div class="remember_txt" @click="forgetPassword">忘记密码?</div>
                    </div>
                </div>
                <div class="button">
                    <a class="btn_a"><button class="login_btn" @click="login">登陆</button></a>
                    <button class="register_btn" @click="add">注册</button>
                </div>
                <div class="share">
                    <div class="share_txt">分享至</div>
                    <div class="share_imgs">
                        <a href="https://wx.qq.com/"><img class="share_img" src="../assets/朋友圈.png"/></a>
                        <a href="https://www.sina.com.cn"><img class="share_img" src="../assets/微博.png"/></a>
                        <a href="https://github.com"><img class="share_img" src="../assets/GitHub.png"/></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {drawCode} from './js/drawCode';

    export default {
        name: "Index",
        methods:{
            login:function () {
                this.needNewCaptcha=true;
                if (this.verifyCode()){
                    let loginInfo = {
                        type:'登录',
                        username:document.getElementById('user').value,
                        password:document.getElementById('password').value
                    };
                    loginInfo = JSON.stringify(loginInfo);
                    let xhr = new XMLHttpRequest();
                    xhr.withCredentials = true;
                    let that = this;
                    xhr.onreadystatechange = function(){
                        if (xhr.readyState===4&&xhr.status===200){
                            let text = xhr.responseText;
                            let json = JSON.parse(text);
                            if (json.status==='success'){
                                that.$notify.success({
                                    title:'成功',
                                    message:json.info,
                                });
                                that.$router.push('/home');
                            } else if (json.status==='warning'){
                                that.$notify.warning({
                                    title:'警告',
                                    message:json.info,
                                })
                            } else if (json.status==='failure'){
                                that.$notify.error({
                                    title:'失败',
                                    message:json.info,
                                })
                            }
                        }
                    };
                    xhr.open('POST','https://localhost:8848/login');
                    xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
                    //xhr.setRequestHeader('Access-Control-Allow-Credentials','true');
                    xhr.send(loginInfo);
                }
            },
            add:function () {
                this.needNewCaptcha=true;
                let loginInfo = {
                    type:'注册',
                    username:document.getElementById('user').value,
                    password:document.getElementById('password').value
                };
                loginInfo = JSON.stringify(loginInfo);
                let xhr = new XMLHttpRequest();
                xhr.withCredentials = true;
                let that = this;
                xhr.onreadystatechange = function(){
                    if (xhr.readyState==4&&xhr.status==200){
                        let text = xhr.responseText;
                        let json = JSON.parse(text);
                        if (json.status=='success'){
                            that.$notify.success({
                                title:'成功',
                                message:json.info,
                            })
                        } else if (json.status=='warning'){
                            that.$notify.warning({
                                title:'警告',
                                message:json.info,
                            })
                        } else if (json.status=='failure'){
                            that.$notify.error({
                                title:'失败',
                                message:json.info,
                            })
                        }
                    }
                };
                xhr.open('POST','https://localhost:8848/login');
                xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
                //xhr.withCredentials = true;
                xhr.send(loginInfo);
            },
            forgetPassword:function () {
                let that = this;
                let username =document.getElementById('user').value;
                if (username===""){
                    this.$notify.error({
                        title:'缺失数据',
                        message:'请输入用户名'
                    });
                    return;
                }
                if (!this.verifyCode())return;
                this.$notify({
                    title:'忘记密码',
                    message:'测试阶段，您可以点此取得密码',
                    type:'warning',
                    onClick:function () {
                        let xhr = new XMLHttpRequest();
                        xhr.withCredentials = true;
                        xhr.onreadystatechange = function(){
                            if (xhr.readyState===4&&xhr.status===200){
                                let text = xhr.responseText;
                                let json = JSON.parse(text);
                                if (json.status===true){
                                    that.$message({
                                        showClose:true,
                                        type:'success',
                                        message:'获取成功，用户'+username+'的密码是：'+json.password,
                                    });
                                } else{
                                    that.$message({
                                        showClose:true,
                                        type:'error',
                                        message:'获取失败，请稍后再试',
                                    });
                                }
                            }
                        };
                        xhr.open('POST','https://localhost:8848/forgetpassword');
                        xhr.setRequestHeader('Content-Type',"application/json; charset=utf-8");
                        xhr.send(JSON.stringify({username:username}));
                    }
                })
            },
            verifyCode:function () {
                if(this.captcha_real.toLocaleLowerCase() === this.captcha){
                    return true;
                }else{
                    this.$notify.error({
                        title:'验证码错误',
                        message:"请检查验证码"
                    });
                    return false;
                }
            },
            generateCaptcha:function(isFocus){
                if (!isFocus || this.needNewCaptcha){
                    const canvas = document.getElementById("captcha_canvas");
                    if (!canvas)canvas.remove();
                    const captchaArray = drawCode();
                    this.captcha_real = "";
                    for (let i = 0 ; i < captchaArray.length; i++){
                        this.captcha_real+=captchaArray[i];
                    }
                    this.needNewCaptcha = false;
                }
            },
        },
        data:function () {
            return{
                user:'',
                password:'',
                captcha:'',
                captcha_real:'',
                needNewCaptcha:true,
            }
        },
        computed:{
            db:function () {
                let Datastore = require('nedb');
                let options = {
                    filename:'./db/login.db',
                    autoload:true,
                    // nodeWebkitAppName:'web_three'
                };
                let db = {};
                db.user = new Datastore(options);
                db.user.loadDatabase();
                db.user.persistence.setAutocompactionInterval(5);
                return db
            }
        }
    }
</script>

<style src="../css/indexStyle.css">

</style>
